<template>
	<view class="info">
		<navbar mode="normal" title="用户信息"></navbar>
		<view v-if="canshow" class="content">
			<image :src="$urlPrefix+nowUser.headImagePath"></image>
			<view class="bar">
				<view class="item">
					<text>{{followUserNum}}</text>
					<text>关注的人</text>
				</view>
				<view class="item">
					<text>{{fansNum}}</text>
					<text>被关注</text>
				</view>
				<view class="item">
					<text>{{followStoreNum}}</text>
					<text>关注店铺</text>
				</view>
			</view>
			<view class="list">
				<uni-list>
					<uni-list-item title="用户id" :note="userId"></uni-list-item>
					<uni-list-item title="用户名" :note="nowUser.name"></uni-list-item>
					<uni-list-item title="用户签名" :note="nowUser.signature"></uni-list-item>
					<uni-list-item title="收货地址"  link="修改" @click="updateAddress"></uni-list-item>
					<uni-list-item title="支付密码"  link="修改" @click="updatePayPassword"></uni-list-item>
					
				</uni-list>
			</view>
		</view>
		<uni-popup type="center" ref="popup">
			<view class="box">
				<input class="input" placeholder="请输入新的支付口令" @input="inputPayPassword" placeholder-class="inputText" password=""/>
			</view>
			<view class="confirm" @click="confirmPayPassword">确认</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canshow: false,
				nowUser: {},
				fansNum:0,
				followStoreNum:0,
				followUserNum:0,
				userId:"",
				payPass:""
			};
		},
		methods:{
			inputPayPassword(data){
				this.payPass = data.detail.value
			},
			updateAddress(){
				uni.navigateTo({
					url:"/pages/user-address/user-address"
				})
			},
			updatePayPassword(){
				this.$refs.popup.open()
			},
			confirmPayPassword(){
				uni.showLoading({
				})
				var vue = this
				var user = this.$getNowUser()
				if(this.payPass.length > 0){
					user.payPassword = this.payPass
					this.$request("user/register",user,function(res){
						uni.hideLoading()
						if(res.data.code == 200){
							vue.$setNowUser(res.data.data[0])
							uni.showToast({
								title:"设置支付密码成功"
							})
							vue.$refs.popup.close()
						}
					})
				}else{
					uni.hideLoading()
					uni.showToast({
						icon:"none",
						title:"请输入口令"
					})
				}
			}
		},
		onLoad(data) {
			this.canshow = false
			var vue = this
			this.$request("user/getAll",{}, (res) => {
				for(var i = 0;i < res.data.data.length;i++){
					if(res.data.data[i].id == data.id){
						vue.nowUser = res.data.data[i];
					}
				}
				vue.fansNum = vue.nowUser.fansList.length
				vue.followStoreNum = vue.nowUser.followStoreList.length
				vue.followUserNum = vue.nowUser.followUserList.length
				vue.userId  = vue.nowUser.id.toString()
				//console.log(vue.nowUser);
				this.canshow = true
			})

		}
	}
</script>

<style lang="scss">
	.info {
		width: 750rpx;
		.box{
			width: 700rpx;
			height: 200rpx;
			background-color: #Fff;
			border-radius: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: relative;
			.input{
				font-size: 36rpx;
				border-bottom: 2rpx #ccc solid;
			}
		}
		.confirm{
			font-size: 32rpx;
			color: $my-main-color;
			position: absolute;
			right: 40rpx;
			bottom: 20rpx;
		}
		.content {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				margin: 60rpx 0 10rpx 0;
				width: 250rpx;
				height: 250rpx;
				border-radius: 125rpx;
				box-shadow: 15rpx 15rpx 50rpx #e7e7e7;
			}

			.bar {
				width: 100%;
				height: 100rpx;
				//background-color: #e5e5e5;
				display: flex;
				flex-direction: row;

				.item {
					flex-grow: 1;
					//border: 2rpx solid red;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text{
						font-size: 30rpx;
					}
				}
			}

			.list {
				width: 100%;
				margin-top: 20rpx;
				box-shadow: 0 -20rpx 40rpx #f3f3f3;
			}
		}
	}
</style>
